<template>
  <div id="createTemplate">
    <div class="createTemplate_content">
        <h3 class="createTemplate_title">标题</h3>
        <el-input class="templateName-text" v-model="templateName"></el-input>
        <el-divider></el-divider>
        <h3 class="createTemplate_title" v-show="titleSelect == 1">文本</h3>
        <div class="quill-editor-box" v-show="titleSelect == 1">
            <div class="deleteBox" @click="deleteTemplate('titleSelect')">删除</div>
            <quill-editor
                ref="text1"
                v-model="content1"
                class="myQuillEditor"
                :options="editorOption1">
                <div id="toolbar1" slot="toolbar">
                <select class="ql-size" title="字体大小">
                    <option value="12px">12px</option>
                    <option value="14px">14px</option>
                    <option value="16px">16px</option>
                    <option value="18px">18px</option>
                    <option value="24px">24px</option>
                </select>
                <button class="ql-bold" title="加粗">Bold</button>
                <button class="ql-underline" title="下划线">underline</button>
                <button class="ql-italic" title="斜体">Italic</button>
                <select class="ql-color" value="color" title="字体颜色"></select>
                <select class="ql-background" value="background" title="背景颜色"></select>
                <select class="ql-align" value="align" title="对齐"></select>
                <button class="ql-clean" title="还原"></button>
                </div>
            </quill-editor>
        </div>
        <el-divider v-if="titleSelect == 1"></el-divider>

        <h3 class="createTemplate_title" v-show="bulletinSummarySelect == 1">简报概述</h3>
        <div v-show="bulletinSummarySelect == 1" class="quill-editor-box">
            <div class="deleteBox" @click="deleteTemplate('bulletinSummarySelect')">删除</div>
            <quill-editor
                ref="text2"
                v-model="content2"
                class="myQuillEditor myQuillEditor2"
                :options="editorOption2">            
                <div id="toolbar2" slot="toolbar">
                    <select class="ql-size" title="字体大小">
                        <option value="12px">12px</option>
                        <option value="14px">14px</option>
                        <option value="16px">16px</option>
                        <option value="18px">18px</option>
                        <option value="24px">24px</option>
                    </select>
                    <button class="ql-bold" title="加粗">Bold</button>
                    <button class="ql-underline" title="下划线">underline</button>
                    <button class="ql-italic" title="斜体">Italic</button>
                    <select class="ql-color" value="color" title="字体颜色"></select>
                    <select class="ql-background" value="background" title="背景颜色"></select>
                    <select class="ql-align" value="align" title="对齐"></select>
                    <button class="ql-clean" title="还原"></button>
                </div>
            </quill-editor>
        </div>
        <el-divider v-if="bulletinSummarySelect == 1"></el-divider>


        <h3 class="createTemplate_title" v-show="surveySummarySelect == 1">监测概述</h3>
        <div v-show="surveySummarySelect == 1" class="quill-editor-box">
            <div class="deleteBox" @click="deleteTemplate('surveySummarySelect')">删除</div>
            <quill-editor
                ref="text3"
                v-model="content3"
                class="myQuillEditor myQuillEditor2"
                :options="editorOption3">
                <div id="toolbar3" slot="toolbar">
                <select class="ql-size" title="字体大小">
                    <option value="12px">12px</option>
                    <option value="14px">14px</option>
                    <option value="16px">16px</option>
                    <option value="18px">18px</option>
                    <option value="24px">24px</option>
                </select>
                <button class="ql-bold" title="加粗">Bold</button>
                <button class="ql-underline" title="下划线">underline</button>
                <button class="ql-italic" title="斜体">Italic</button>
                <select class="ql-color" value="color" title="字体颜色"></select>
                <select class="ql-background" value="background" title="背景颜色"></select>
                <select class="ql-align" value="align" title="对齐"></select>
                <button class="ql-clean" title="还原"></button>
                </div>
            </quill-editor>
        </div>
        <el-divider v-if="surveySummarySelect == 1"></el-divider>

        <h3 v-show="trendSelect == 1" class="createTemplate_title">事件走势图</h3>
        <div class="chartBox" v-show="trendSelect == 1">
            <div class="deleteBox" @click="deleteTemplate('trendSelect')">删除</div>
            <div class="chart" id="lineChart"></div>
        </div>
        <el-divider v-if="trendSelect == 1"></el-divider>


        <h3 v-show="siteSelect == 1" class="createTemplate_title">网站统计图</h3>
        <div v-show="siteSelect == 1" class="chartBox">
            <div class="deleteBox" @click="deleteTemplate('siteSelect')">删除</div>
            <div class="chart" id="barChart"></div>
        </div>
        <el-divider v-if="siteSelect == 1"></el-divider>

        <h3 v-show="sourceSelect == 1" class="createTemplate_title">来源分析图</h3>
        <div v-show="sourceSelect == 1" class="chartBox">
            <div class="deleteBox" @click="deleteTemplate('sourceSelect')">删除</div>
            <div class="chart" id="pieChart3"></div>
        </div>
        <el-divider v-if="sourceSelect == 1"></el-divider>

        <h3 v-show="emotionSelect == 1" class="createTemplate_title">情感分析图</h3>
        <div v-show="emotionSelect == 1" class="chartBox">
            <div class="deleteBox" @click="deleteTemplate('emotionSelect')">删除</div>
            <div class="chart" id="pieChart2"></div>
        </div>
        <el-divider v-if="emotionSelect == 1"></el-divider>

        <h3 v-show="outsideSelect == 1" class="createTemplate_title">境内分外布图</h3>
        <div v-show="outsideSelect == 1" class="chartBox">
            <div class="deleteBox" @click="deleteTemplate('outsideSelect')">删除</div>
            <div class="chart" id="pieChart1"></div>
        </div>
        <el-divider v-if="outsideSelect == 1"></el-divider>

        <h3 v-show="regionSelect == 1" class="createTemplate_title">地域分布图</h3>
        <div v-show="regionSelect == 1" class="chartBox" style="height: 550px;">
            <div class="deleteBox" @click="deleteTemplate('regionSelect')">删除</div>
            <div id="map-chart" class="chart"></div>
            <div class="visualMap"><span class="visualMap_top">高</span><span class="visualMap_bottom">低</span></div>
            <div id="area-chart" class="chart-box">
                <ul class="area-ul">
                    <li class="area-li" v-for="item in areaList" :key="item.areacode">
                        <span class="area-name">{{item.name}}</span>
                        <span class="area-progress"><span class="area-rate" :style="{'width':item.rate}"></span></span>
                        <span class="area-data">{{item.value}}条</span>
                    </li>
                </ul>
            </div>
        </div>
        <el-divider v-if="regionSelect == 1"></el-divider>
       

        <h3 v-show="mainOpinionSelect == 1" class="createTemplate_title">主要舆情</h3>
        <div v-show="mainOpinionSelect == 1" class="tabelBox">
            <div class="deleteBox" @click="deleteTemplate('mainOpinionSelect')">删除</div>
            <div class="tabelBox_filter">
                <el-select
                    v-model="mainOpinionSort"
                    placeholder="请选择"
                >
                    <el-option
                    v-for="item in sortOption"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-button v-popover:popover5>自定义列</el-button>
                <el-popover
                    ref="popover5"
                    placement="top"
                    width="160"
                    v-model="visible2">
                    
                    <el-checkbox-group class="defineCloumn" v-model="checkCloumn" @change="checkListFuc">
                      <el-checkbox label="1">序列</el-checkbox>
                      <el-checkbox label="2">标题</el-checkbox>
                      <el-checkbox label="3">摘要</el-checkbox>
                      <el-checkbox label="4">来源站点</el-checkbox>
                      <el-checkbox label="5">发布日期</el-checkbox>
                      <el-checkbox label="6">相关舆情数</el-checkbox>
                      <el-checkbox label="7">情感属性</el-checkbox>
                      <el-checkbox label="8">原文链接</el-checkbox>
                    </el-checkbox-group>
                    <p>注意：最多可勾选4列</p>
                <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="defineCloumn" style="margin-left: 10px">确定</el-button>
                </div>
                </el-popover>
            </div>
            <el-table
                :data="tableData"
                border
                class="sentimentTable"
                style="width: 100%">
                <el-table-column v-for="item in tableCloumn" 
                :key="item.index"
                :type="item.index=='1'?'index':''"
                :prop="item.prop"
                :label="item.label">
                </el-table-column>
                <!-- <el-table-column
                type="index"
                label="序列"
                width="50">
                </el-table-column>
                <el-table-column
                prop="title"
                label="标题">
                </el-table-column>
                <el-table-column
                prop="resouceSite"
                label="来源站点">
                </el-table-column>
                <el-table-column
                prop="emotion"
                label="情感属性">
                </el-table-column> -->
            </el-table>
        </div>

        <el-divider v-if="mainOpinionSelect == 1"></el-divider>
        <h3 v-show="suggestSelect == 1" class="createTemplate_title">处置建议</h3>
        <div v-show="suggestSelect == 1" class="quill-editor-box">
            <div class="deleteBox" @click="deleteTemplate('suggestSelect')">删除</div>
            <quill-editor
                ref="text4"
                v-model="content4"
                class="myQuillEditor myQuillEditor2"
                :options="editorOption4">
                <div id="toolbar4" slot="toolbar">
                <select class="ql-size" title="字体大小">
                    <option value="12px">12px</option>
                    <option value="14px">14px</option>
                    <option value="16px">16px</option>
                    <option value="18px">18px</option>
                    <option value="24px">24px</option>
                </select>
                <button class="ql-bold" title="加粗">Bold</button>
                <button class="ql-underline" title="下划线">underline</button>
                <button class="ql-italic" title="斜体">Italic</button>
                <select class="ql-color" value="color" title="字体颜色"></select>
                <select class="ql-background" value="background" title="背景颜色"></select>
                <select class="ql-align" value="align" title="对齐"></select>
                <button class="ql-clean" title="还原"></button>
                </div>
            </quill-editor>
        </div>

        <div class="groupBtn">
            <el-button type="primary" class="reset" @click="backBrief">返回简报模板</el-button>
            <el-button class="createReport" @click="saveTemplate">保存模板</el-button>
        </div>
    </div>


<el-dialog
  title="勾选素材"
  :visible.sync="dialogVisible"
  width="70%">
    <el-table
        :data="tableDataClone"
        border
        @selection-change="handleSelectionChange"
        class="dialogTable"
        style="width: 100%">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
        prop="title"
        label="标题"
        width="180">
        </el-table-column>
        <el-table-column
        prop="abstract"
        label="摘要"
        width="380">
        </el-table-column>
        <el-table-column
        prop="pubTime"
        label="发布日期">
        </el-table-column>
        <el-table-column
        prop="number"
        label="相关舆情数">
        </el-table-column>
    </el-table>
    <a class="loadMoreBtn">加载更多</a>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        
    </span>
</el-dialog>

  </div>
</template>
<script>

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { Quill,quillEditor } from "vue-quill-editor";
import "../../assets/css/createTemplate.css";
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['12px', '14px', '16px', '18px', '24px']
Quill.register(Size, true);
import "../../../node_modules/echarts/map/js/china.js"
export default {
  data() {
    return {
        templateId: "",
        dialogVisible: false,
        content1: "",
        editorOption1: {
          placeholder: "",
          theme: "snow", // or 'bubble' 
          modules: {
            toolbar: {
              container: '#toolbar1'
            }
          }
        },
        content2: '<p class="ql-align-center">本报告就加入素材的文章进行分析,</p><p class="ql-align-center">监测时间范围为{t1}-{t2}，共有 {n1} 篇相关素材。</p><p class="ql-align-center">{s1}的占比最大,共有 {n2} 篇,达到信息总量的 {n3}%。</p><p class="ql-align-center">详细报告请继续浏览。</p>',
        editorOption2: {
          placeholder: "请输入",
          theme: "snow", // or 'bubble' 
          modules: {
            toolbar: {
              container: '#toolbar2'
            }
          }
        },
        content3: '<p><span style="font-size: 14px; color: rgb(51, 51, 51);">本报告监测与主题相关的信息{n4}条，其中正面信息{n5}条，正面占比{n6}%；负面信息{n7}条，负面占比{n8}%；中立信息{n9}条，中立占比{n10}%。</span></p>',
        editorOption3: {
          placeholder: "请输入",
          theme: "snow", // or 'bubble' 
          modules: {
            toolbar: {
              container: '#toolbar3'
            }
          }
        },
        content4: '<p>对于舆情信息中具有潜在危害的事件及情况应给予关注并积极处理，防止不良影响产生及扩散。此外，密切关注此前敏感预警事件的发展情况，及时制定有效应对措施。鉴于监测结果中负面舆情时有发生， 应吸取相关经验教训，做好预防和处理工作。</p>',
        editorOption4: {
          placeholder: "请输入",
          theme: "snow", // or 'bubble' 
          modules: {
            toolbar: {
              container: '#toolbar4'
            }
          }
        },
        areaList: [
            {name: "北京", areacode: "110000", value: 2540, children: Array(0), rate : "10%"},
            {name: "广东", areacode: "440000", value: 1729, children: Array(0), rate : "0%"},
            {name: "上海", areacode: "310200", value: 1340, children: Array(0), rate : "0%"},
            {name: "湖北", areacode: "420000", value: 680, children: Array(0), rate : "0%"},
            {name: "福建", areacode: "350000", value: 590, children: Array(0), rate : "0%"},
            {name: "浙江", areacode: "330000", value: 370, children: Array(0), rate : "0%"},
            {name: "山东", areacode: "370000", value: 280, children: Array(0), rate : "0%"},
            {name: "安徽", areacode: "340000", value: 25, children: Array(0), rate : "0%"},
            {name: "贵州", areacode: "520000", value: 22, children: Array(0), rate : "0%"},
            {name: "江西", areacode: "360000", value: 21, children: Array(0), rate : "0%"},
            {name: "重庆", areacode: "500000", value: 20, children: Array(0), rate : "0%"},
            {name: "内蒙古", areacode: "150000", value: 19, children: Array(0), rate : "0%"},
            {name: "江苏", areacode: "320000", value: 18, children: Array(0), rate : "0%"},
            {name: "吉林", areacode: "220000", value: 18, children: Array(0), rate : "0%"},
            {name: "新疆", areacode: "650000", value: 16, children: Array(0), rate : "0%"},
            {name: "湖南", areacode: "430000", value: 15, children: Array(0), rate : "0%"},
            {name: "天津", areacode: "120000", value: 14, children: Array(0), rate : "0%"},
            {name: "陕西", areacode: "610000", value: 13, children: Array(0), rate : "0%"},
            {name: "河南", areacode: "410000", value: 13, children: Array(0), rate : "0%"},
            {name: "山西", areacode: "140000", value: 10, children: Array(0), rate : "0%"},
            {name: "河北", areacode: "130000", value: 9, children: Array(0), rate : "0%"},
            {name: "辽宁", areacode: "210000", value: 8, children: Array(0), rate : "0%"},
            {name: "广西", areacode: "450000", value: 8, children: Array(0), rate : "0%"},
            {name: "云南", areacode: "530000", value: 7, children: Array(0), rate : "0%"},
            {name: "黑龙江", areacode: "230000", value: 7, children: Array(0), rate : "0%"},
            {name: "甘肃", areacode: "620000", value: 6, children: Array(0), rate : "0%"},
            {name: "四川", areacode: "510000", value: 5, children: Array(0), rate : "0%"},
            {name: "青海", areacode: "630000", value: 4, children: Array(0), rate : "0%"},
            {name: "海南", areacode: "460000", value: 1, children: Array(0), rate : "0%"},
            {name: "宁夏", areacode: "640000", value: 1, children: Array(0), rate : "0%"},
            {name: "澳门", areacode: "820000", value: 0, children: Array(0), rate : "0%"},
            {name: "香港", areacode: "810000", value: 0, children: Array(0), rate : "0%"},
            {name: "南海诸岛", areacode: "900000", value: 0, children: Array(0), rate : "0%"},
            {name: "台湾", areacode: "710000", value: 0, children: Array(0), rate : "0%"},
            {name: "西藏", areacode: "540000", value: 0, children: Array(0), rate : "0%"}
        ],
        tableCloumn:[
            {
                index: '1',
                label: '序列',
                prop: 'index'
            },{
                index: '2',
                label: '标题',
                prop: 'title'
            },{
                index: '4',
                label: '来源站点',
                prop: 'resouceSite'
            },{
                index: '7',
                label: '情感属性',
                prop: 'emotion'
            }
        ],
        tableData: [{
          title: '特朗普疫情语录“大赏”，果然没人比他更懂得表扬自己',
          resouceSite: '凤凰网',
          emotion: '中立'
        }],
        // sort: 1,
        sortOption: [
            { label: "发布时间降序", value: 1 },
            { label: "发布时间升序", value: 2 }
        ],
        visible2: false,
        checkCloumn: ['1','2','4','7'],
        tableDataClone: [{
          title: '特朗普疫情语录“大赏”，果然没人比他更懂得表扬自己',
          abstract: '北京连续两天出现新增新冠肺炎确诊病例全国多地开始下架三文鱼13日记者在走访中发现- 记者探访 -“我们今天上午就接到通知将三文鱼餐品下架了。”市中心一超市日料摊',
          pubTime: '2020-06-14 23:22:33',
          number: '34'
        }],
        templateName: '', // 模板名称
        titleSelect: 1, // 文本选择(0-取消 1-选中)
        bulletinSummarySelect: 1, // 简报概述选择(0-取消 1-选中)
        surveySummarySelect: 1, // 监测概述选择(0-取消 1-选中)
        trendSelect: 1, // 事件走势图选择(0-取消 1-选中)
        siteSelect: 1, // 网站统计图选择(0-取消 1-选中)
        sourceSelect: 1, // 来源分析选择(0-取消 1-选中)
        emotionSelect: 1, // 情感分析图选择(0-取消 1-选中)
        outsideSelect: 1, // 境内外分布选择(0-取消 1-选中)
        regionSelect: 1, // 地域分布图选择(0-取消 1-选中)
        mainOpinionSelect: 1, // 主要舆情选择(0-取消 1-选中)
        mainOpinionSort: 1, // 主要舆情排序(1-发布时间降序 2-相似文章数降序)
        mainOpinionColumn: 1, // 主要舆情展示列(1-序列 2-标题 3-摘要 4-来源站点 5-发布日期 6-相关舆情数 7-情感属性 8-原文链接, 逗号分割, 默认1,2,4,7)
        suggestSelect: 1, // 处置建议选择(0-取消 1-选中)
        asideCheckList:['文本','简报概述','监测概述', '事件走势图','网站统计图','来源分析图','情感分析图','境内外分布','地域分布图','主要舆情','处置建议']
    }
  },
  methods:{
        backBrief(){
            this.$router.push({path: '/briefCenter'})
        },
        saveTemplate(){
            let checkCloumn = ''
            for (let i = 0; i < this.checkCloumn.length; i++) {
                if(i == this.checkCloumn.length-1){
                    checkCloumn = checkCloumn + this.checkCloumn[i]
                }else{
                    checkCloumn = checkCloumn + this.checkCloumn[i] + ','
                }
                
            }
            let param = {
                templateName: this.templateName, // 模板名称
                titleSelect: this.titleSelect, // 文本选择(0-取消 1-选中)
                bulletinSummarySelect: this.bulletinSummarySelect, // 简报概述选择(0-取消 1-选中)
                surveySummarySelect: this.surveySummarySelect, // 监测概述选择(0-取消 1-选中)
                trendSelect: this.trendSelect, // 事件走势图选择(0-取消 1-选中)
                siteSelect: this.siteSelect, // 网站统计图选择(0-取消 1-选中)
                sourceSelect: this.sourceSelect, // 来源分析选择(0-取消 1-选中)
                emotionSelect: this.emotionSelect, // 情感分析图选择(0-取消 1-选中)
                outsideSelect: this.outsideSelect, // 境内外分布选择(0-取消 1-选中)
                regionSelect: this.regionSelect, // 地域分布图选择(0-取消 1-选中)
                mainOpinionSelect: this.mainOpinionSelect, // 主要舆情选择(0-取消 1-选中)
                mainOpinionSort: this.mainOpinionSort, // 主要舆情排序(1-发布时间降序 2-相似文章数降序)
                mainOpinionColumn: checkCloumn, // 主要舆情展示列(1-序列 2-标题 3-摘要 4-来源站点 5-发布日期 6-相关舆情数 7-情感属性 8-原文链接, 逗号分割, 默认1,2,4,7)
                suggestSelect: this.suggestSelect, // 处置建议选择(0-取消 1-选中)
            }
            this.$Api.templateAdd(param).then(res => {
                console.log(res);
                if(res.code == '200'){
                  this.backBrief()
                }
            })
        },
        deleteTemplate(val){
            if(val == 'titleSelect'){
                this.titleSelect = 0
                this.asideCheckList.remove('文本')
            }else if(val == 'bulletinSummarySelect'){
                this.bulletinSummarySelect = 0
                this.asideCheckList.remove('简报概述')
            }else if(val == 'surveySummarySelect'){
                this.surveySummarySelect = 0
                this.asideCheckList.remove('监测概述')
            }else if(val == 'trendSelect'){
                this.trendSelect = 0
                this.asideCheckList.remove('事件走势图')
            }else if(val == 'siteSelect'){
                this.siteSelect = 0
                this.asideCheckList.remove('网站统计图')
            }else if(val == 'sourceSelect'){
                this.sourceSelect = 0
                this.asideCheckList.remove('来源分析图')
            }else if(val == 'emotionSelect'){
                this.emotionSelect = 0
                this.asideCheckList.remove('情感分析图')
            }else if(val == 'outsideSelect'){
                this.outsideSelect = 0
                this.asideCheckList.remove('境内外分布')
            }else if(val == 'regionSelect'){
                this.regionSelect = 0
                this.asideCheckList.remove('地域分布图')
            }else if(val == 'mainOpinionSelect'){
                this.mainOpinionSelect = 0
                this.asideCheckList.remove('主要舆情')
            }else if(val == 'suggestSelect'){
                this.suggestSelect = 0
                this.asideCheckList.remove('处置建议')
            }
            this.$bus.$emit('createTemplateChange', this.asideCheckList);
        },
        checkListFuc(val){
            console.log(val)
            if(val.length >4){
                this.checkCloumn = val.slice(0,4)
            }
        },
        defineCloumn(){
            this.visible2 = false
            let cloumn = [];
            for (let i = 0; i < this.checkCloumn.length; i++) {
                let obj = {}
                if(this.checkCloumn[i]=='1'){
                    obj = {
                        index: '1',
                        label: '序列',
                        prop: 'index'
                    }
                }else if(this.checkCloumn[i]=='2'){
                    obj = {
                        index: '2',
                        label: '标题',
                        prop: 'title'
                    }
                }else if(this.checkCloumn[i]=='3'){
                    obj = {
                        index: '3',
                        label: '摘要',
                        prop: 'abstract'
                    }
                }else if(this.checkCloumn[i]=='4'){
                    obj = {
                        index: '4',
                        label: '来源站点',
                        prop: 'resouceSite'
                    }
                }else if(this.checkCloumn[i]=='5'){
                    obj = {
                        index: '5',
                        label: '发布日期',
                        prop: 'pubDate'
                    }
                }else if(this.checkCloumn[i]=='6'){
                    obj = {
                        index: '6',
                        label: '相关舆情数',
                        prop: 'num'
                    }
                }else if(this.checkCloumn[i]=='7'){
                    obj = {
                        index: '7',
                        label: '情感属性',
                        prop: 'emotion'
                    }
                }else if(this.checkCloumn[i]=='8'){
                    obj = {
                        index: '8',
                        label: '原文链接',
                        prop: 'link'
                    }
                }
                cloumn.push(obj)
            }
            this.tableCloumn = cloumn
        },
        drawBarChart(){
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['新浪微博', '论坛', '微信', '博客', '电子报', '贴吧', '短视频'],
                    axisTick : {show: false},
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color:"#eaf0fe"
                        }
                    },
                    splitLine : {
                        show : false
                    },
                    axisLabel:{
                        textStyle: {
                            color: '#a4b2c9'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show:false
                    },
                    splitLine : {
                        show : true,
                        lineStyle : {
                            color : [ "#eee" ],
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#a4b2c9'
                        }
                    }
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130],
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: '#f2f7ff'
                    },
                    itemStyle:{
                        normal:{
                            color:'#44a6ff'
                        }
                    },
                }]
            }
            this.barChart.setOption(option);
        },
        drawMap(){
            var data = {
                areacode: "",
                name: "",
                value: 100,
                children: [
                    {name: "北京", areacode: "110000", value: 45404, children: Array(0)},
                    {name: "广东", areacode: "440000", value: 1729, children: Array(0)},
                    // {name: "上海", areacode: "310200", value: 534, children: Array(0)},
                    {name: "湖北", areacode: "420000", value: 268, children: Array(0)},
                    {name: "福建", areacode: "350000", value: 59, children: Array(0)},
                    {name: "浙江", areacode: "330000", value: 37, children: Array(0)},
                    {name: "山东", areacode: "370000", value: 28, children: Array(0)},
                    {name: "安徽", areacode: "340000", value: 25, children: Array(0)},
                    // {name: "贵州", areacode: "520000", value: 22, children: Array(0)},
                    {name: "江西", areacode: "360000", value: 21, children: Array(0)},
                    {name: "重庆", areacode: "500000", value: 20, children: Array(0)},
                    // {name: "内蒙古", areacode: "150000", value: 19, children: Array(0)},
                    {name: "江苏", areacode: "320000", value: 18, children: Array(0)},
                    // {name: "吉林", areacode: "220000", value: 18, children: Array(0)},
                    // {name: "新疆", areacode: "650000", value: 16, children: Array(0)},
                    // {name: "湖南", areacode: "430000", value: 15, children: Array(0)},
                    // {name: "天津", areacode: "120000", value: 14, children: Array(0)},
                    // {name: "陕西", areacode: "610000", value: 13, children: Array(0)},
                    // {name: "河南", areacode: "410000", value: 13, children: Array(0)},
                    // {name: "山西", areacode: "140000", value: 10, children: Array(0)},
                    // {name: "河北", areacode: "130000", value: 9, children: Array(0)},
                    // {name: "辽宁", areacode: "210000", value: 8, children: Array(0)},
                    {name: "广西", areacode: "450000", value: 8, children: Array(0)},
                    // {name: "云南", areacode: "530000", value: 7, children: Array(0)},
                    {name: "黑龙江", areacode: "230000", value: 7, children: Array(0)},
                    // {name: "甘肃", areacode: "620000", value: 6, children: Array(0)},
                    // {name: "四川", areacode: "510000", value: 5, children: Array(0)},
                    // {name: "青海", areacode: "630000", value: 4, children: Array(0)},
                    // {name: "海南", areacode: "460000", value: 1, children: Array(0)},
                    // {name: "宁夏", areacode: "640000", value: 1, children: Array(0)},
                    // {name: "澳门", areacode: "820000", value: 0, children: Array(0)},
                    // {name: "香港", areacode: "810000", value: 0, children: Array(0)},
                    // {name: "南海诸岛", areacode: "900000", value: 0, children: Array(0)},
                    // {name: "台湾", areacode: "710000", value: 0, children: Array(0)},
                    {name: "西藏", areacode: "540000", value: 0, children: Array(0)}
                ]
            }
            var option = {
                tooltip: {
                        formatter:function(params){
                            if(isNaN(params.value)){
                                params.value = '--';
                            }
                            return params.seriesName+'<br />'+params.name+'：'+params.value;
                        }
                    },
                visualMap: {
                    min: 0,
                    max: 5000,
                    itemHeight: 90,
                    left: -500,
                    top: 'bottom',
                    text: ['高','低'],
                    inRange: {
                        color: ['#35d8a9', '#4dc1fe', '#4c9cfb']
                    }
                },
                geo: {
                    map: 'china',
                    roam: false,
                    zoom:1.1,
                    label: {
                        normal: {
                            show: false,
                            fontSize:'10'
                        }
                    },
                    itemStyle: {
                        normal:{
                            borderWidth: 1,
                            borderColor: '#fff',
                            color: "#e3f0f8"// 背景颜色
                        },
                        emphasis:{
                            areaColor: '#F3B329' // 鼠标选中高亮颜色
                        }
                    }
                },
                series : [
                    {
                        name: '信息量',
                        type: 'map',
                        geoIndex: 0,
                        data:data.children
                    }
                ]
            };
            this.mapChart.setOption(option);
        },
        drawPieChart1(){
            var option = {
                legend: {
                    orient: 'vertical',
                    right: 20,
                    bottom: 20,
                    data: ['微信', '微博'],
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '70%',
                        center: ['40%', '50%'],
                        data: [
                            {
                                value: 0,
                                name: '微信',
                                itemStyle:{
                                    normal:{
                                        shadowColor: 'rgba(250,125,172,0.5)',
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 5,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [
                                            {offset: 0, color: '#fa7dac'},
                                            {offset: 1, color: '#ffb561'}
                                        ],
                                        globalCoord: false
                                        },
                                    },
                                    emphasis: {
                                    }
                                }
                            },{
                                value: 610,
                                name: '微博',
                                itemStyle:{
                                    normal:{
                                        shadowColor: 'rgba(63,200,227,0.5)',
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 5,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [
                                            {offset: 0, color: '#38a3f7'},
                                            {offset: 1, color: '#36d5fe'}
                                        ],
                                        globalCoord: true
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
            this.pieChart1.setOption(option);
        },
        drawPieChart2(){
            var option = {
                legend: {
                    orient: 'vertical',
                    right: 20,
                    bottom: 20,
                    data: ['负面'],
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '70%',
                        center: ['40%', '50%'],
                        data: [{
                                value: 610,
                                name: '负面',
                                itemStyle:{
                                    normal:{
                                        shadowColor: 'rgba(63,200,227,0.5)',
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 5,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [
                                            {offset: 0, color: '#38a3f7'},
                                            {offset: 1, color: '#91e96a'}
                                        ],
                                        globalCoord: true
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
            this.pieChart2.setOption(option);
        },
        drawPieChart3(){
            var option = {
                legend: {
                    orient: 'vertical',
                    right: 20,
                    bottom: 20,
                    data: ['微博'],
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '70%',
                        center: ['40%', '50%'],
                        data: [{
                                value: 610,
                                name: '微博',
                                itemStyle:{
                                    normal:{
                                        shadowColor: 'rgba(253,169,110,0.5)',
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 5,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 1,
                                            colorStops: [
                                            {offset: 0, color: '#fa80a6'},
                                            {offset: 1, color: '#fda96e'}
                                        ],
                                        globalCoord: true
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
            this.pieChart3.setOption(option);
        },
        drawLineChart(){
            var option = {
                tooltip: {
                    backgroundColor: 'rgba(255,255,255,.8)',
                    borderColor: '#2f74ff',
                    borderWidth: 1,
                    borderRadius: 0,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        z: '1',
                        lineStyle: {
                            width: 1,
                        }
                    },
                    textStyle: {
                        color: '#333333'
                    },

                    formatter: function (datas) {
                        var res = datas[0].name + '<br/>', val;
                        for (var i = 0, length = datas.length; i < length; i++) {
                            val = (datas[i].value);
                            res += datas[i].seriesName + '：' + val + '<br/>';
                        }
                        return res;
                    }

                },
                xAxis: {
                    nameTextStyle: {
                        color: "#a4b2cc",
                        align: "left"
                    },
                    type: 'category',
                    boundaryGap: true,
                    data: ['10/11', '10/12', '10/13', '10/14', '10/15', '10/16'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ebf2fc',
                        }
                    },
                    axisTick:{
                        show:false,
                    },
                    axisLabel: {
                        show: true,
                        interval:0,
                        textStyle: {
                            color: '#a7b2c8',
                            align: 'center',
                            fontSize:12
                        },
                        formatter: function (value) {
                            // 格式化成月/日，只在第一个刻度显示年份
                            let valueArr=value.split(" ")
                            return valueArr.join("\n")
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ["#ebf2fc"],
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        show: true,
                        showMaxLabel: false,
                        color: '#06D3CD',
                        // fontFamily: 'PingFangSC',
                        // fontSize: 14,
                        // fontWeight: 300,
                        textStyle: {
                            color: '#a4b2cc'
                        }
                    }
                },
                calculable : true,
                series: [
                    {
                        name: '  正面',
                        type: 'line',
                        smooth: false,
                        data: [40, 30, 20, 20, 32, 23],
                        hoverAnimation: false,
                        symbol: 'circle',
                        symbolSize: 10,
                        lineStyle: {
                            color: '#42a9f8',
                            shadowColor: 'rgba(66,169,248,0.7)',
                            shadowOffsetX: 0,
                            shadowOffsetY: 5,
                            shadowBlur: 10
                        },
                        itemStyle: {
                            normal: {
                                color: '#42a9f8'
                            }
                        },
                        showSymbol: false
                    }
                ]
            };
            this.lineChart.setOption(option);
        },
        handleSelectionChange(val) {
            console.log(val);
        },
        defineDatas(){
            this.dialogVisible = true;
        },
        arrPrototype(){
            Array.prototype.remove = function(val) { 
            var index = this.indexOf(val); 
            if (index > -1) { 
            this.splice(index, 1); 
            } 
            }
        },
        setTemplate(){
            let param = this.templateId
            this.$Api.templateDetail(param).then(res => {
                console.log(res);
                if(res.code == '200'){
                  let arr = [];
                  this.templateName = res.data.templateName;
                  this.titleSelect = res.data.titleSelect;
                  this.bulletinSummarySelect = res.data.bulletinSummarySelect;
                  this.surveySummarySelect = res.data.surveySummarySelect;
                  this.trendSelect = res.data.trendSelect;
                  this.siteSelect = res.data.siteSelect;
                  this.sourceSelect = res.data.sourceSelect;
                  this.emotionSelect = res.data.emotionSelect;
                  this.outsideSelect = res.data.outsideSelect;
                  this.regionSelect = res.data.regionSelect;
                  this.mainOpinionSort = res.data.mainOpinionSort;
                  this.suggestSelect = res.data.suggestSelect;
                  if(this.titleSelect == 1){
                      arr.push('文本')
                  }
                  if(this.bulletinSummarySelect == 1){
                      arr.push('简报概述')
                  }
                  if(this.surveySummarySelect == 1){
                      arr.push('监测概述')
                  }
                  if(this.trendSelect == 1){
                      arr.push('事件走势图')
                  }
                  if(this.siteSelect == 1){
                      arr.push('网站统计图')
                  }
                  if(this.sourceSelect == 1){
                      arr.push('来源分析图')
                  }
                  if(this.emotionSelect == 1){
                      arr.push('情感分析图')
                  }
                  if(this.outsideSelect == 1){
                      arr.push('境内外分布')
                  }
                  if(this.regionSelect == 1){
                      arr.push('地域分布图')
                  }
                  if(this.mainOpinionSelect == 1){
                      arr.push('主要舆情')
                  }
                  if(this.suggestSelect == 1){
                      arr.push('处置建议')
                  }
                  this.$bus.$emit('createTemplateChange', arr);
                }
            })
        }
  },
  created(){
      this.$bus.$on('createTemplate', msg =>{
        console.log(msg)
        let asideCheckList = [];
        let checkedString = JSON.stringify(msg);

        if(checkedString.indexOf('处置建议') > -1){
            this.suggestSelect = 1
            asideCheckList.push('处置建议')
        }else{
            this.suggestSelect = 0
            asideCheckList.remove('处置建议')
        }
        if(checkedString.indexOf('主要舆情') > -1){
            this.mainOpinionSelect = 1
            asideCheckList.push('主要舆情')
        }else{
            this.mainOpinionSelect = 0
            asideCheckList.remove('主要舆情')
        }
        if(checkedString.indexOf('地域分布图') > -1){
            this.regionSelect = 1
            asideCheckList.push('地域分布图')
        }else{
            this.regionSelect = 0
            asideCheckList.remove('地域分布图')
        }
        if(checkedString.indexOf('境内外分布') > -1){
            this.outsideSelect = 1
            asideCheckList.push('境内外分布')
        }else{
            this.outsideSelect = 0
            asideCheckList.remove('境内外分布')
        }
        if(checkedString.indexOf('情感分析图') > -1){
            this.emotionSelect = 1
            asideCheckList.push('情感分析图')
        }else{
            this.emotionSelect = 0
            asideCheckList.remove('情感分析图')
        }
        if(checkedString.indexOf('来源分析图') > -1){
            this.sourceSelect = 1
            asideCheckList.push('来源分析图')
        }else{
            this.sourceSelect = 0
            asideCheckList.remove('来源分析图')
        }
        if(checkedString.indexOf('网站统计图') > -1){
            this.siteSelect = 1
            asideCheckList.push('网站统计图')
        }else{
            this.siteSelect = 0
            asideCheckList.remove('网站统计图')
        }
        if(checkedString.indexOf('事件走势图') > -1){
            this.trendSelect = 1
            asideCheckList.push('事件走势图')
        }else{
            this.trendSelect = 0
            asideCheckList.remove('事件走势图')
        }
        if(checkedString.indexOf('监测概述') > -1){
            this.surveySummarySelect = 1
            asideCheckList.push('监测概述')
        }else{
            this.surveySummarySelect = 0
            asideCheckList.remove('监测概述')
        }
        if(checkedString.indexOf('简报概述') > -1){
            this.bulletinSummarySelect = 1
            asideCheckList.push('简报概述')
        }else{
            this.bulletinSummarySelect = 0
            asideCheckList.remove('简报概述')
        }
        if(checkedString.indexOf('文本') > -1){
            this.titleSelect = 1
            asideCheckList.push('文本')
        }else{
            this.titleSelect = 0
            asideCheckList.remove('文本')
        }
        this.asideCheckList = asideCheckList
        console.log(this.asideCheckList)
        
      })
      this.arrPrototype();
      this.templateId = this.$route.path.split('/')[2];
      this.barChart = this.$echarts.init(document.getElementById("barChart"));
      this.mapChart = this.$echarts.init(document.getElementById('map-chart'));
      this.pieChart1 = this.$echarts.init(document.getElementById("pieChart1"));
      this.pieChart2 = this.$echarts.init(document.getElementById("pieChart2"));
      this.pieChart3 = this.$echarts.init(document.getElementById("pieChart3"));
      this.lineChart = this.$echarts.init(document.getElementById("lineChart"));
      this.drawBarChart();
      this.drawMap();
      this.drawPieChart1();
      this.drawPieChart2();
      this.drawPieChart3();
      this.drawLineChart();
  },
  watch:{
      templateId(val){
          if(val !== 'newTemplate'){
              this.setTemplate()
          }
      }
  },
  components: {
    quillEditor
  }
};
</script>